<template>
    <div class="form-container">
        <el-form :model="formData" :rules="rules" ref="ruleForm" class="card-form">
            <div class="card-group" v-for="(val, key, index) in trueShowColumn" :key="index">
                <h3 class="card-group-title" v-show="(trueShowColumn[key][0].formGroupName =='其它'&&showOther) || trueShowColumn[key][0].formGroupName !=='其它'">{{ trueShowColumn[key][0].formGroupName }}</h3>
                <el-row>
                    <!--    {id: "11", text: "下拉树选择"}
                            {id: "12", text: "模糊匹配输入框"}
                            {id: "1", text: "文本框"}
                            {id: "8", text: "多行文本域"}
                            {id: "2", text: "下拉列表选择"}
                            {id: "6", text: "日期选择框"}
                            {id: "3", text: "单选框组"}
                            {id: "4", text: "复选框组"}
                            {id: "5", text: "复选框"}
                            {id: "7", text: "lookup弹出窗"}
                            {id: "9", text: "附件"}
                            {id: "10", text: "富文本"} -->
                    <!-- 第1行 -->
                    <el-col
                        v-for="item in val"
                        :key="item.columnId"
                        :xs="24"
                        :sm="item.formColumnColSpan > 2 ? 24 : 12 * item.formColumnColSpan"
                        :md="item.formColumnColSpan > 3 ? 24 : 8 * item.formColumnColSpan"
                        :lg="item.formColumnColSpan > 3 ? 24 : 8 * item.formColumnColSpan"
                        :xl="item.formColumnColSpan > 4 ? 24 : 6 * item.formColumnColSpan">
                        <el-form-item
                            :label="item.columnName"
                            :label-width="formLabelWidth"
                            :required="item.formColumnRequired == 'Y'"
                            v-if="item.formColumnShowType !== 'hide'"
                            :prop="item.columnId">
                            <template v-if="item.columnType === '1'">
                                <el-input
                                    v-if="item.columnTypeDetail.textboxCheckType !== 'int'"
                                    v-model="formData[item.columnId.toUpperCase()]"
                                    :disabled="item.formColumnShowType == 'readonly'"
                                    :readonly="item.formColumnShowType == 'readonly'"
                                    @change="handleFormChange($event, item)"
                                    auto-complete="off"/>
                                <el-input-number v-else :disabled="item.formColumnShowType == 'readonly'" v-model="formData[item.columnId.toUpperCase()]"/>
                            </template>
                            <!-- 下拉搜索 -->
                            <template v-if="item.columnType === '2' && item.columnTypeDetail.comboboxIsSearch == 'Y'">
                                <el-select
                                    v-model="formData[item.columnId.toUpperCase()]"
                                    :multiple="item.columnTypeDetail.comboboxMultiselect == 'Y'"
                                    :disabled="item.formColumnShowType == 'readonly'"
                                    @change="handleFormChange($event, item)"
                                    filterable
                                    placeholder="请选择">
                                    <el-option
                                        v-for="item2 in dictValues[item.columnTypeDetail.dictTypeCode]"
                                        :key="item2.code"
                                        :label="item2.name"
                                        :value="item2.code"/>
                                </el-select>
                            </template>
                            <template v-if="item.columnType === '2' && (item.columnTypeDetail.comboboxIsSearch == 'N' || item.columnTypeDetail.comboboxIsSearch == 'false')">
                                <el-select v-model="formData[item.columnId.toUpperCase()]" @change="handleFormChange($event, item)" :disabled="item.formColumnShowType == 'readonly'" placeholder="请选择">
                                    <el-option
                                        v-for="item2 in dictValues[item.columnTypeDetail.dictTypeCode]"
                                        :key="item2.code"
                                        :label="item2.name"
                                        :value="item2.code"/>
                                </el-select>
                            </template>
                            <template v-if="item.columnType === '3'">
                                <el-radio-group
                                    v-model="formData[item.columnId.toUpperCase()]"
                                    @change="handleFormChange($event, item)"
                                    :disabled="item.formColumnShowType == 'readonly'">
                                    <el-radio
                                        v-for="item3 in dictValues[item.columnTypeDetail.dictTypeCode]"
                                        :key="item3.code"
                                        :label="item3.code">{{ item2.name }}</el-radio>
                                </el-radio-group>
                            </template>
                            <template v-if="item.columnType === '4'">
                                <el-checkbox-group
                                    v-model="formData[item.columnId.toUpperCase()]"
                                    @change="handleFormChange($event, item)"
                                    :disabled="item.formColumnShowType == 'readonly'">
                                    <el-checkbox
                                        v-for="item4 in dictValues[item.columnTypeDetail.dictTypeCode]"
                                        :key="item4.code"
                                        :label="item4.code">{{ item2.name }}</el-checkbox>
                                </el-checkbox-group>
                            </template>
                            <template v-if="item.columnType === '5'">
                                <el-switch
                                    v-model="formData[item.columnId.toUpperCase()]"
                                    @change="handleFormChange($event, item)"
                                    :disabled="item.formColumnShowType == 'readonly'"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-value="100"
                                    inactive-value="0"/>
                            </template>
                            <template v-if="item.columnType === '6'">
                                <el-date-picker
                                    v-model="formData[item.columnId.toUpperCase()]"
                                    @change="handleFormChange($event, item)"
                                    :disabled="item.formColumnShowType == 'readonly'"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="选择日期"/>
                            </template>
                            <template v-if="item.columnType === '7'">
                                <el-input v-model="formData[item.columnId.toUpperCase()]" :disabled="true">
                                    <el-button slot="append" icon="el-icon-search" @click="showDialogChoose(item)"/>
                                </el-input>
                                <el-dialog title="选择" :visible.sync="item.showLookup" :width="item.columnTypeDetail.lookupWinWidth + 'px'" :style="{height:item.columnTypeDetail.lookupWinHeight + 'px'}">
                                    <el-button type="primary" >选择</el-button>
                                    <el-tree
                                        :props="item.columnTypeDetail.lookupTree.treeProps"
                                        :load="loadNode"
                                        :node-key="item.columnTypeDetail.lookupValueProperty"
                                        lazy
                                        @node-click="handleNodeClick"
                                        @check="handleCheck"
                                        :filter-node-method="filterNode"
                                        show-checkbox
                                        check-strictly/>
                                        <!-- check-strictly加上不关联，不加关联 -->
                                </el-dialog>

                            </template>
                            <template v-if="item.columnType === '8'">
                                <el-input
                                    type="textarea"
                                    :disabled="item.formColumnShowType == 'readonly'"
                                    @change="handleFormChange($event, item)"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    v-model="formData[item.columnId.toUpperCase()]" />
                            </template>
                            <template v-if="item.columnType === '9'">
                                9
                            </template>
                            <template v-if="item.columnType === '10'">
                                <tinymce :height="300" v-model="formData[item.columnId.toUpperCase()]"/>
                                <div class="editor-content" v-html="formData[item.columnId.toUpperCase()]"/>
                            </template>
                            <template v-if="item.columnType === '11'">
                                11
                            </template>
                            <template v-if="item.columnType === '12'">
                                <el-select
                                    v-model="formData[item.columnId.toUpperCase()]"
                                    :disabled="item.formColumnShowType == 'readonly'"
                                    @change="handleFormChange($event, item)"
                                    filterable
                                    remote
                                    :remote-method="remoteMethod"
                                    placeholder="请选择">
                                    <el-option
                                        v-for="item12 in dictValues[item.columnTypeDetail.dictTypeCode]"
                                        :key="item12.value"
                                        :label="item12.label"
                                        :value="item12.value" />
                                </el-select>
                            </template>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script>
import { getDictDatasAll, queryTreeSolution } from '@/api/api'
import Tinymce from '@/components/Tinymce'
export default {
    components: { Tinymce },
    props: {
        trueShowColumn: {},
        formData: {},
        rules: {},
        formId: ''
    },
    data() {
        return {
            formLabelWidth: '150px',
            dictValues: {},
            tree: {},
            defaultDate: 'TODAY',
            showOther: true
        }
    },
    created() {
        this._getDictDatasAll()
        const tempOtherList = this.trueShowColumn['']
        let num = 0
        tempOtherList.forEach(item => {
            if (item.formColumnShowType === 'hide') {
                num++
            }
        })
        if (tempOtherList.length === num) {
            this.showOther = false
        }
    },
    methods: {
        handleFormChange(e, item) {
            // 日期
            item.newValue = e
            this.$emit('form-change', item)
        },
        _getDictDatasAll() {
            getDictDatasAll(this.formId)
                .then(res => {
                    // console.log(res)
                    this.dictValues = res
                })
        },
        showDialogChoose(item) {
            this.tree = item.columnTypeDetail.lookupTree.search
            item.showLookup = true
        },
        // 懒加载树节点数据
        loadNode(node, resolve) {
            console.log(node)
            console.log(this.tree)
            let keyName
            for (const key in this.tree) {
                if (this.tree.hasOwnProperty(key) && key !== 'lv' && key !== 'id') {
                    keyName = key
                    this.tree[key] = node.key
                }
            }
            if (node.level !== 0) {
                this.tree.lv = node.level - 1
            } else {
                console.log(this.tree)
            }
            queryTreeSolution(this.tree.id, keyName, this.tree[keyName], this.tree.lv)
                .then(res => {
                    res.forEach(item => {
                        item.isLeaf = !item.isParent
                    })
                    resolve(res)
                })
        },
        // 过滤树节点
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        handleNodeClick(data) {
            console.log(data)
        },
        handleCheck(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
            console.log(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys)
        }
    }
}
</script>
